<template>
  <div class="app-container">
    <el-form :inline="true" :model="listQuery" class="demo-form-inline" @submit.native.prevent>
      <el-form-item label="用户名">
        <el-input v-model="listQuery.q_name" style="width: 200px" size="small" class="filter-item" />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="listQuery.q_mobile" style="width: 200px" size="small" class="filter-item" />
      </el-form-item>
      <el-form-item label="会员等级">
        <el-select v-model="listQuery.q_grade" size="small" placeholder="请选择">
          <el-option v-for="item in memberGrade" :label="item.name" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button class="filter-item" size="small" type="primary" @click="check">查询</el-button>
        <el-button class="filter-item" size="small" type="primary" @click="rest">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="button-table-margin">
      <el-button size="small" type="primary" @click="optIntegral" v-permission="['admin/member/config/gradevalue/update']">
        经验积分管理
      </el-button>
      <el-button size="small" type="primary" @click="optBalance" v-permission="['admin/member/member/balanceopt']">余额管理</el-button>
      <el-button size="small" type="primary" @click="upLog" v-permission="['admin/member/member/uploglist']">升级日志</el-button>
      <el-button size="small" type="primary" @click="gradeLog" v-permission="['admin/member/config/gradevalue']">经验值日志</el-button>
      <el-button size="small" type="primary" @click="integralLog" v-permission="['admin/member/member/grdIntloglist']">
        积分值日志
      </el-button>
      <el-button size="small" type="primary" @click="balanceLog" v-permission="['admin/member/member/balanceloglist']">余额日志</el-button>
      <el-button size="small" type="primary" @click="address" v-permission="['admin/member/member/addresslist']">收货地址</el-button>
    </div>
    <el-table ref="singleTable" :data="dataList" border fit highlight-current-row @current-change="handleCurrentChange" style="width: 100%">
      <el-table-column type="index" align="center" width="50"></el-table-column>
      <el-table-column property="name" label="用户名" width="200"></el-table-column>
      <el-table-column property="grade" width="100" label="等级">
        <template slot-scope="scope">
          {{ codeBox.MEMBER_GRADE[scope.row.grade] }}
        </template>
      </el-table-column>
      <el-table-column property="balance" width="100" label="账户余额"></el-table-column>
      <el-table-column property="gradeValue" width="100" label="经验值"></el-table-column>
      <el-table-column property="integral" width="100" label="积分"></el-table-column>
      <el-table-column property="registerTime" width="200" label="注册时间"></el-table-column>
      <el-table-column property="lastLoginTime" width="200" label="最后登录时间"></el-table-column>
      <el-table-column property="mobile" width="150" label="手机号"></el-table-column>
      <el-table-column property="source" width="150" label="来源">
        <template slot-scope="scope">
          {{ codeBox.MEMBER_SOURCE[scope.row.source] }}
        </template>
      </el-table-column>
      <el-table-column property="isEmailVerify" width="150" label="邮箱验证">
        <template slot-scope="scope">
          {{ codeBox.YES_NO[scope.row.isEmailVerify] }}
        </template>
      </el-table-column>
      <el-table-column property="isSmsVerify" width="150" label="手机验证">
        <template slot-scope="scope">
          {{ codeBox.YES_NO[scope.row.isSmsVerify] }}
        </template>
      </el-table-column>
      <el-table-column property="canReceiveSms" width="150" label="接收短信">
        <template slot-scope="scope">
          {{ codeBox.YES_NO[scope.row.canReceiveSms] }}
        </template>
      </el-table-column>
      <el-table-column property="canReceiveEmail" width="150" label="接收邮件">
        <template slot-scope="scope">
          {{ codeBox.YES_NO[scope.row.canReceiveEmail] }}
        </template>
      </el-table-column>
      <el-table-column property="status" width="150" label="使用状态">
        <template slot-scope="scope">
          {{ codeBox.MEMBER_STATUS[scope.row.status] }}
        </template>
      </el-table-column>
      <el-table-column property="birthday" width="150" label="生日"></el-table-column>
      <el-table-column property="qq" width="150" label="qq"></el-table-column>
      <el-table-column property="email" width="150" label="邮箱"></el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-dialog title="设置经验值积分" :visible.sync="dialogFormVisible">
      <el-form
        ref="memberGradeIntegralLogs"
        :rules="rules"
        :model="memberGradeIntegralLogs"
        label-position="right"
        label-width="100px"
        style="width: 400px; margin-left: 50px">
        <el-form-item label="用户名">
          <div>{{ memberGradeIntegralLogs.memberName }}</div>
        </el-form-item>
        <el-form-item label="操作类型" prop="type">
          <el-select v-model="memberGradeIntegralLogs.type" class="filter-item" placeholder="请选择">
            <el-option v-for="item in memberGrdInt" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="具体操作" prop="optType">
          <el-select v-model="memberGradeIntegralLogs.optType" class="filter-item" placeholder="请选择">
            <el-option v-for="item in optTypeValues" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="变更数值" prop="value">
          <el-input-number v-model="memberGradeIntegralLogs.value" :min="1" :max="999999999" :precision="0"></el-input-number>
        </el-form-item>
        <el-form-item label="描述" prop="optDes">
          <el-input v-model="memberGradeIntegralLogs.optDes" type="text" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="valueOptSubmit()">提交</el-button>
      </div>
    </el-dialog>

    <el-dialog title="设置账户余额" :visible.sync="dialogFormVisibleBalance">
      <el-form
        ref="memberBalanceLogs"
        :rules="rules"
        :model="memberBalanceLogs"
        label-position="right"
        label-width="100px"
        style="width: 400px; margin-left: 50px">
        <el-form-item label="用户名">
          <div>{{ memberBalanceLogs.memberName }}</div>
        </el-form-item>
        <el-form-item label="用户余额">
          <div>{{ memberBalanceLogs.balance }}</div>
        </el-form-item>
        <el-form-item label="具体操作" prop="state">
          <el-select v-model="memberBalanceLogs.state" class="filter-item" placeholder="请选择">
            <el-option v-for="item in optTypeValues" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="变更数值" prop="money">
          <el-input-number v-model="memberBalanceLogs.money" :min="1" :max="999999999" :precision="0"></el-input-number>
        </el-form-item>
        <el-form-item label="描述" prop="remark">
          <el-input v-model="memberBalanceLogs.remark" type="text" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleBalance = false">取消</el-button>
        <el-button type="primary" @click="balanceOptSubmit()">提交</el-button>
      </div>
    </el-dialog>

    <el-dialog title="升级日志" :visible.sync="dialogFormVisibleUploglist">
      <el-table ref="singleTable" :data="memberGradeUpLogsList" height="500" border fit highlight-current-row style="width: 100%">
        <el-table-column type="index" align="center" width="50"></el-table-column>
        <el-table-column property="memberName" label="用户名" width="150"></el-table-column>
        <el-table-column property="beforeExper" label="升级之前的经验值" width="150"></el-table-column>
        <el-table-column property="afterExper" label="升级之后的经验值" width="150"></el-table-column>
        <el-table-column property="beforeGrade" width="150" label="升级之前的等级">
          <template slot-scope="scope">
            {{ codeBox.MEMBER_GRADE[scope.row.beforeGrade] }}
          </template>
        </el-table-column>
        <el-table-column property="afterGrade" width="150" label="升级之后的等级">
          <template slot-scope="scope">
            {{ codeBox.MEMBER_GRADE[scope.row.afterGrade] }}
          </template>
        </el-table-column>
        <el-table-column property="createTime" width="200" label="升级时间"></el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="totalUplog"
        :page.sync="listQueryUplog.page"
        :limit.sync="listQueryUplog.limit"
        @pagination="getListUplog" />
    </el-dialog>

    <el-dialog title="经验值日志" width="65%" :visible.sync="dialogFormVisibleGradeIntegralLogslist">
      <el-table ref="singleTable" :data="memberGradeIntegralLogsList" height="400" border fit highlight-current-row style="width: 100%">
        <el-table-column type="index" align="center" width="50"></el-table-column>
        <el-table-column property="memberName" label="用户名" width="150"></el-table-column>
        <el-table-column property="value" label="经验值" width="150"></el-table-column>
        <el-table-column property="optType" width="150" label="操作">
          <template slot-scope="scope">
            {{ codeBox.MEMBER_VAL_OPT_TYPE[scope.row.optType] }}
          </template>
        </el-table-column>
        <el-table-column property="optDes" width="200" label="操作描述"></el-table-column>
        <el-table-column property="createTime" width="200" label="变更时间"></el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="totalMemberGradeIntegralLogs"
        :page.sync="listQueryMemberGradeIntegralLogs.page"
        :limit.sync="listQueryMemberGradeIntegralLogs.limit"
        @pagination="getListMemberGradeIntegralLogs" />
    </el-dialog>

    <el-dialog title="积分日志" width="65%" :visible.sync="dialogFormVisibleGradeLogslist">
      <el-table ref="singleTable" :data="memberGradeIntegralLogsList" height="400" border fit highlight-current-row style="width: 100%">
        <el-table-column type="index" align="center" width="50"></el-table-column>
        <el-table-column property="memberName" label="用户名" width="150"></el-table-column>
        <el-table-column property="value" label="积分" width="150"></el-table-column>
        <el-table-column property="optType" width="150" label="操作">
          <template slot-scope="scope">
            {{ codeBox.MEMBER_VAL_OPT_TYPE[scope.row.optType] }}
          </template>
        </el-table-column>
        <el-table-column property="optDes" width="200" label="操作描述"></el-table-column>
        <el-table-column property="createTime" width="200" label="变更时间"></el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="totalMemberGradeIntegralLogs"
        :page.sync="listQueryMemberGradeIntegralLogs.page"
        :limit.sync="listQueryMemberGradeIntegralLogs.limit"
        @pagination="getListMemberGradeIntegralLogs" />
    </el-dialog>

    <el-dialog title="余额日志" width="65%" :visible.sync="dialogFormVisibleBalancelLogslist">
      <el-table ref="singleTable" :data="balanceLogList" height="400" border fit highlight-current-row style="width: 100%">
        <el-table-column type="index" align="center" width="50"></el-table-column>
        <el-table-column property="memberName" label="用户名" width="150"></el-table-column>
        <el-table-column property="moneyBefore" label="变化之前的余额" width="150"></el-table-column>
        <el-table-column property="moneyAfter" label="变化之后的余额" width="150"></el-table-column>
        <el-table-column property="money" label="变化金额" width="150"></el-table-column>
        <el-table-column property="state" width="150" label="变化原因">
          <template slot-scope="scope">
            {{ codeBox.MEMBER_BALANCE_STATE[scope.row.state] }}
          </template>
        </el-table-column>
        <el-table-column property="remark" width="200" label="备注"></el-table-column>
        <el-table-column property="optName" width="200" label="操作者"></el-table-column>
        <el-table-column property="createTime" width="200" label="操作时间"></el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="totalMemberGradeIntegralLogs"
        :page.sync="listQueryMemberGradeIntegralLogs.page"
        :limit.sync="listQueryMemberGradeIntegralLogs.limit"
        @pagination="getListMemberBalanceLogs" />
    </el-dialog>

    <el-dialog title="收货地址" width="65%" :visible.sync="dialogFormVisibleAddresslist">
      <el-table ref="singleTable" :data="memberAddressList" height="400" border fit highlight-current-row style="width: 100%">
        <el-table-column type="index" align="center" width="50"></el-table-column>
        <el-table-column property="memberName" label="用户名" width="150"></el-table-column>
        <el-table-column property="addAll" label="省市区" width="200"></el-table-column>
        <el-table-column property="addressInfo" label="详细地址" width="250"></el-table-column>
        <el-table-column property="mobile" label="手机" width="150"></el-table-column>
        <el-table-column property="phone" width="150" label="固话"></el-table-column>
        <el-table-column property="state" width="100" label="是否默认">
          <template slot-scope="scope">
            {{ codeBox.MEMBER_ADDRESS_STATE[scope.row.state] }}
          </template>
        </el-table-column>
        <el-table-column property="createTime" width="200" label="创建时间"></el-table-column>
        <el-table-column property="updateTime" width="200" label="修改时间"></el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="totalMemberGradeIntegralLogs"
        :page.sync="listQueryMemberGradeIntegralLogs.page"
        :limit.sync="listQueryMemberGradeIntegralLogs.limit"
        @pagination="fetchMemberAddressList" />
    </el-dialog>
  </div>
</template>
<script>
import {
  fetchMemberList,
  valueoptMember,
  balanceoptMember,
  fetchMemberUplogList,
  fetchMemberGrdIntLogList,
  fetchMemberBalancelogList,
  fetchMemberAddressList,
} from "@/api/member";
import Pagination from "@/components/Pagination";
import { Message } from "element-ui";
import { getCodeManager, codeToArray } from "@/api/all";
export default {
  name: "member",
  components: { Pagination },
  data() {
    return {
      dataList: [],
      memberGrade: [],
      memberGrdInt: [],
      memberGradeUpLogsList: [],
      memberGradeIntegralLogsList: [],
      balanceLogList: [],
      memberAddressList: [],
      optTypeValues: [
        {
          value: 5,
          name: "系统增加",
        },
        {
          value: 6,
          name: "系统减少",
        },
      ],
      total: 0,
      totalUplog: 0,
      totalMemberGradeIntegralLogs: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        q_name: "",
        q_mobile: "",
        q_grade: "",
      },
      listQueryUplog: {
        page: 1,
        limit: 20,
        memberId: 0,
      },
      listQueryMemberGradeIntegralLogs: {
        page: 1,
        limit: 20,
        memberId: 0,
        type: 0,
      },
      currentRow: null,
      dialogFormVisible: false,
      dialogFormVisibleBalance: false,
      dialogFormVisibleUploglist: false,
      dialogFormVisibleGradeIntegralLogslist: false,
      dialogFormVisibleGradeLogslist: false,
      dialogFormVisibleBalancelLogslist: false,
      dialogFormVisibleAddresslist: false,
      memberGradeIntegralLogs: {
        memberId: undefined,
        memberName: "",
        type: undefined,
        optType: undefined,
        value: undefined,
        optDes: "",
      },
      memberBalanceLogs: {
        memberId: undefined,
        memberName: "",
        balance: "",
        state: undefined,
        money: undefined,
        optType: undefined,
        remark: "",
      },
      rules: {
        type: [{ required: true, message: "请选择操作类型", trigger: "change" }],
        optType: [{ required: true, message: "具体操作不能为空", trigger: "change" }],
        value: [{ required: true, message: "请填写变更的数值", trigger: "blur" }],
        optDes: [
          { required: true, message: "请输入描述信息", trigger: "blur" },
          { min: 2, max: 50, message: "长度在 2 到 50 个字符", trigger: "blur" },
        ],
        state: [{ required: true, message: "具体操作不能为空", trigger: "change" }],
        money: [{ required: true, message: "请填写变更的数值", trigger: "blur" }],
        remark: [
          { required: true, message: "请输入描述信息", trigger: "blur" },
          { min: 2, max: 50, message: "长度在 2 到 50 个字符", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    getCodeManager(
      "MEMBER_GRD_INT_LOG_T,YES_NO,MEMBER_GRADE,MEMBER_SOURCE,GENDER,MEMBER_STATUS,MEMBER_VAL_OPT_TYPE,MEMBER_BALANCE_STATE,MEMBER_ADDRESS_STATE",
      () => {
        this.memberGrade = codeToArray("MEMBER_GRADE");
        this.memberGrdInt = codeToArray("MEMBER_GRD_INT_LOG_T");
      }
    );
    this.getList();
  },
  methods: {
    handleCurrentChange(val) {
      // 选中当前行数据
      this.currentRow = val;
    },
    // 获取列表数据
    getList() {
      this.listLoading = true;
      fetchMemberList(this.listQuery).then((response) => {
        this.dataList = response.data.rows;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    check() {
      this.getList();
    },
    rest() {
      this.listQuery = {
        page: 1,
        limit: 20,
        q_name: "",
        q_mobile: "",
        q_grade: "",
      };
      this.getList();
    },
    optIntegral() {
      //打开设置经验值和积分
      if (this.currentRow == null) {
        Message.error("请选择一条记录");
        return;
      }
      this.memberGradeIntegralLogs = {
        memberId: this.currentRow.id,
        memberName: this.currentRow.name,
      };
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["memberGradeIntegralLogs"].clearValidate();
      });
    },
    optBalance() {
      //打开设置余额
      if (this.currentRow == null) {
        Message.error("请选择一条记录");
        return;
      }
      this.memberBalanceLogs = {
        memberId: this.currentRow.id,
        memberName: this.currentRow.name,
        balance: this.currentRow.balance,
      };
      this.dialogFormVisibleBalance = true;
      this.$nextTick(() => {
        this.$refs["memberBalanceLogs"].clearValidate();
      });
    },
    valueOptSubmit() {
      //提交经验值和积分的修改
      this.$refs["memberGradeIntegralLogs"].validate((valid) => {
        if (valid) {
          valueoptMember(this.memberGradeIntegralLogs).then((res) => {
            if (!res.data.success) {
              Message.error(res.data.message);
              return;
            }
            this.dialogFormVisible = false;
            this.getList();
            Message.success("操作成功");
          });
        }
      });
    },
    balanceOptSubmit() {
      //提交余额修改
      this.$refs["memberBalanceLogs"].validate((valid) => {
        if (valid) {
          balanceoptMember(this.memberBalanceLogs).then((res) => {
            if (!res.data.success) {
              Message.error(res.data.message);
              return;
            }
            this.dialogFormVisibleBalance = false;
            this.getList();
            Message.success("操作成功");
          });
        }
      });
    },
    upLog() {
      //升级日志
      if (this.currentRow == null) {
        Message.error("请选择一条记录");
        return;
      }
      this.listQueryUplog = {
        memberId: this.currentRow.id,
      };
      this.dialogFormVisibleUploglist = true;
      this.getListUplog();
    },
    getListUplog() {
      this.listLoading = true;
      fetchMemberUplogList(this.listQueryUplog).then((response) => {
        this.memberGradeUpLogsList = response.data.rows;
        this.totalUplog = response.data.total;
        this.listLoading = false;
      });
    },
    gradeLog() {
      //经验值日志
      if (this.currentRow == null) {
        Message.error("请选择一条记录");
        return;
      }
      this.listQueryMemberGradeIntegralLogs = {
        page: 1,
        limit: 20,
        memberId: this.currentRow.id,
        type: 1,
      };
      this.dialogFormVisibleGradeIntegralLogslist = true;
      this.getListMemberGradeIntegralLogs();
    },
    getListMemberGradeIntegralLogs() {
      this.listLoading = true;
      fetchMemberGrdIntLogList(this.listQueryMemberGradeIntegralLogs).then((response) => {
        this.memberGradeIntegralLogsList = response.data.rows;
        this.totalMemberGradeIntegralLogs = response.data.total;
        this.listLoading = false;
      });
    },
    integralLog() {
      //积分日志
      if (this.currentRow == null) {
        Message.error("请选择一条记录");
        return;
      }
      this.listQueryMemberGradeIntegralLogs = {
        page: 1,
        limit: 20,
        memberId: this.currentRow.id,
        type: 2,
      };
      this.dialogFormVisibleGradeLogslist = true;
      this.getListMemberGradeIntegralLogs();
    },
    balanceLog() {
      //余额日志
      if (this.currentRow == null) {
        Message.error("请选择一条记录");
        return;
      }
      this.listQueryMemberGradeIntegralLogs = {
        page: 1,
        limit: 20,
        memberId: this.currentRow.id,
      };
      this.dialogFormVisibleBalancelLogslist = true;
      this.getListMemberBalanceLogs();
    },
    getListMemberBalanceLogs() {
      this.listLoading = true;
      fetchMemberBalancelogList(this.listQueryMemberGradeIntegralLogs).then((response) => {
        this.balanceLogList = response.data.rows;
        this.totalMemberGradeIntegralLogs = response.data.total;
        this.listLoading = false;
      });
    },
    address() {
      if (this.currentRow == null) {
        Message.error("请选择一条记录");
        return;
      }
      this.listQueryMemberGradeIntegralLogs = {
        page: 1,
        limit: 20,
        memberId: this.currentRow.id,
      };
      this.dialogFormVisibleAddresslist = true;
      this.getListMemberAddress();
    },
    getListMemberAddress() {
      this.listLoading = true;
      fetchMemberAddressList(this.listQueryMemberGradeIntegralLogs).then((response) => {
        this.memberAddressList = response.data.rows;
        this.totalMemberGradeIntegralLogs = response.data.total;
        this.listLoading = false;
      });
    },
  },
};
</script>
<style scoped>
.filter-container .el-col-6 {
  margin-bottom: 15px;
}
.filter-item {
  margin-bottom: 0;
}
/deep/ .filter-container label {
  font-size: 14px;
  font-weight: 500;
  margin-right: 10px;
}
</style>
